<template>
  <div class="dashboard">
    <h3>数据库服务器</h3>
    <template v-for="(grp, index) of dbGroup" :key="'dbs' + index">
      <db-server v-for="(item, cIndex) of grp" :name="item.display" :dbIndex="index * DBGroupNumber + cIndex" :dbType="item.type" />
    </template>
  </div>

  <!-- <Tabs value="ecs">
      <TabPane label="华为弹性云服务器" name="ecs">
        <Row v-for="(grp, index) of this.ecsGroup" :key="'ecs'+index">
          <Col v-for="(item, cIndex) of grp" :span="ecsRowNumber" :key="'ecs:'+index+'/'+cIndex">
            <ecs :detail="item" />
          </Col>
        </Row>
      </TabPane>
  </Tabs> -->
</template>

<script setup>
  import { ref, inject, computed, onMounted, defineAsyncComponent } from 'vue';

  const dbServer = defineAsyncComponent(() => import('./db/components/ServerInfo.vue'));

  // 数据库服务分行每行显示数量
  const DBGroupNumber = 3;

  // 弹性云服务器分行每行显示数量
  const ECSGroupNumber = 3;

  const http = inject('$http');
  const dbServers = ref([]);
  const ecsServers = ref([]);

  const dbRowNumber = computed(() => 24 / DBGroupNumber);
  const escRowNumber = computed(() => 24 / ECSGroupNumber);

  const dbGroup = computed(() => {
    if (dbServers && dbServers.value.length > 0) {
      let index = 0;
      let grp = [];

      for (let db of dbServers.value) {
        let grpIndex = parseInt(index / DBGroupNumber);

        if (!grp[grpIndex]) {
          grp[grpIndex] = [];
        }

        grp[grpIndex].push(db);

        index++;
      }

      return grp;
    }

    return [];
  });

  const ecsGroup = computed(() => {
    if (ecsServers && ecsServers.value.length > 0) {
      let index = 0;
      let grp = [];

      for (let ecs of ecsServers.value) {
        let grpIndex = parseInt(index / ECSGroupNumber);

        if (!grp[grpIndex]) {
          grp[grpIndex] = [];
        }

        grp[grpIndex].push(ecs);

        index++;
      }

      return grp;
    }

    return [];
  });

  onMounted(() => {
    http.get('/api/db/servers').then(res => {
      dbServers.value = res.filter(d => d.type != 'sqlite');
    });
  });
</script>
<style lang="less" scoped>
  .dashboard {
    margin: 0 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    > h3 {
      margin: 0 0 5px 0;
      padding: 5px 15px;
      flex: 0 0 100%;
      font-weight: bold;
      border-radius: 8px 8px;
      font-weight: bolder;
      user-select: none;
      color: #fff;
      background-color: #337ab7;
      border-color: #337ab7;
      background-image: linear-gradient(to bottom, #337ab7 0, #2e6da4 100%);
    }

    > div {
      min-width: 200px;
      max-width: calc((100%) / 4);
      flex: 0 0 calc((100% - 32px) / 4);
      margin-bottom: 5px;

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  @media (max-width: 1200px) {
    .dashboard {
      > div {
        flex: 0 0 calc((100% - 24px) / 3);
        max-width: calc(100% / 3);
      }
    }
  }

  @media (max-width: 900px) {
    .dashboard {
      > div {
        flex: 0 0 calc((100% - 16px) / 2);
        max-width: calc(100% / 2);
      }
    }
  }
</style>
